<template>
  <div id="hiddenRecored">
          <el-form :label-position="labelPosition" ref="forms" :model="forms" class="gameSearW">
              <div style="display:flex;flex-wrap:wrap;">
                 <el-form-item label-width="90px" label="用户查询 :">
                   <el-input style="width:200px;" placeholder="用户查询" v-model="forms.username"></el-input>
                </el-form-item>
                 <el-form-item label-width="90px" label="时间查询 :" style="margin-left:50px">
                  <el-date-picker style="width:200px;" class="top" @change="changeDate1" placeholder="开始时间" type="date" v-model="forms.beginDate"></el-date-picker>
                  <span>~</span>
                  <el-date-picker style="width:200px;" class="top" @change="changeDate2" placeholder="结束时间" type="date" v-model="forms.endDate"></el-date-picker>
                </el-form-item>
                <el-button type="info" @click="resetAll" style="margin-left:20px;height:40px">重置</el-button>
                <el-button type="primary" @click="getpreData" style="margin-left:10px;height:40px">查询</el-button>
              </div>
          </el-form>
       <el-tabs type="border-card">
       <el-tab-pane label="用户使用记录"   @click="getuserData">
                <el-table
                :data="userMsg.list"
                style="width: 100%"
                max-height="400">
                <el-table-column
                type="index"
                label="序号"
                width="80">
              </el-table-column>
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="创建时间">
                        <span>{{ props.row.createTime }}</span>
                      </el-form-item>
                      <el-form-item label="非绑定筹码">
                        <span>{{ props.row.notBindChip }}</span>
                      </el-form-item>
                      <el-form-item label="用户名">
                        <span>{{ props.row.username }}</span>
                      </el-form-item>
                      <el-form-item label="绑定筹码">
                        <span>{{ props.row.bindChip }}</span>
                      </el-form-item>
                      <el-form-item label="用户编号">
                        <span>{{ props.row.userCode }}</span>
                      </el-form-item>
                      <el-form-item label="宝石">
                        <span>{{ props.row.gemstone }}</span>
                      </el-form-item>
                      <el-form-item label="性别">
                         <span>{{ Gender(props.row.sex)}}</span>
                      </el-form-item>
                      <el-form-item label="胜率">
                        <span>{{ props.row.win }}</span>
                      </el-form-item>
                      <el-form-item label="手机号">
                        <span>{{ props.row.phone }}</span>
                      </el-form-item>
                      <el-form-item label="邀请人数">
                        <span>{{ props.row.spreadMany }}</span>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                 <el-table-column
                    prop="createTime"
                    label="创建时间">
                    </el-table-column>
                <el-table-column
                  label="用户编号"
                  prop="userCode">
                </el-table-column>
                <el-table-column
                  label="用户名"
                  prop="username">
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="手机号"
                    width="130">
                    </el-table-column>
              </el-table>
             <div style="float:right">
                <el-pagination @current-change="handleCurrentChange"
                              :current-page.sync="userMsg.pageNumber"
                              :page-size="userMsg.pageSize"
                              layout="total, prev, pager, next"
                              :total="userMsg.totalRow">
              </el-pagination>
             </div>
        </el-tab-pane>
   </el-tabs>
  </div>
</template>
<script>
import Gender from '../server/gender'
import axios from 'axios'
  export default {
    data() {
      return {
        labelPosition: 'left',
        //传给后台的数据
        forms:{
          username:'',
          beginDate:'',
          endDate: '',
          pageSize: 5,
          pageNumber: 1,
          lottertyId: undefined
        },
        //接收数据
        userMsg:{list:[]},
        Gender:Gender
      }
    },
     created () {  
        this.getuserData();
    },
    methods: {
      // 重置方法
      resetAll(){
         this.forms.username = '';
         this.forms.beginDate = '';
         this.forms.endDate = '';
      },
      // 查询方法
      getpreData() {
        this.tab(this.forms.beginDate,this.forms.endDate)
        this.$api.userSecdata(this.forms).then(res=>{
          if(res.code=='000000'){
              if(res.data.list.length==0){
                console.log('999999999999999')
                this.$alert('您所查询的条件不存在！！！', '查询错误', {dangerouslyUseHTMLString: true});
              } else{
                this.userMsg = res.data
              }
        }
      })
    },
      //用户记录
     getuserData(){
       this.$api.userdata(this.forms).then(res=>{
            if(res.code=='000000'){
              this.userMsg = res.data;
            }
          });
     },handleCurrentChange (val) {
        this.forms.pageNumber = val
        this.getuserData()
      },
      //转时间戳
      changeDate1 (val) {
        val ? this.forms.beginDate = Date.parse(val) : this.forms.beginDate = undefined
      },
      changeDate2 (val) {
        val ? this.forms.endDate = Date.parse(val) : this.forms.endDate = undefined
      },
      tab(date1,date2){
        var oDate1 = new Date(date1);
        var oDate2 = new Date(date2);
        if(oDate1.getTime() > oDate2.getTime()){
            this.$alert('您设置的时间范围不正确，请重新输入正确的时间范围', '查询错误', {dangerouslyUseHTMLString: true});
        } else {
            return
        }
      }, 
    }   
  }
</script>
<style lang="">
  #hiddenRecored{
    margin:10px 20px;
    min-width:1100px;
  }
  #hiddenRecored .top{
    width:90px;
  }
  #hiddenRecored .el-input__inner{
    width:100%!important;
  }
</style>